<template>
    <div>
        <component
            v-if="item.topComponent"
            :is="item.topComponent.componentName"
            :attrs="item.topComponent"
        />

        <el-form-item
            :prop="item.prop"
            :error="item.error"
            :show-message="item.showMessage"
            :inline-message="item.inlineMessage"
            :size="item.size"
            :label-width="item.labelWidth"
        >
            <span slot="label" v-if="!item.hideLabel">{{ item.label }}</span>
            <el-col :span="item.inputWidth">
                <ItemDisplay
                    v-if="item.relationName"
                    v-model="formData[item.relationName][item.relationValueKey]"
                    :form-item="item"
                    :form-data="formData"
                    v-bind="$attrs"
                />
                <ItemDisplay
                    v-else
                    v-model="formData[item.prop]"
                    :form-item="item"
                    :form-data="formData"
                    v-bind="$attrs"
                />
                <div v-if="item.help" class="form-item-help" v-html="item.help"></div>
            </el-col>
        </el-form-item>
        <component
            v-if="item.footerComponent"
            :is="item.footerComponent.componentName"
            :attrs="item.footerComponent"
        />
    </div>
</template>
<script>
import ItemDisplay from "./ItemDisplay";
import ItemIf from "./ItemIf";

export default {
    props: ["attrs",  "formData"],
    components: {
        ItemDisplay,
        ItemIf,
    },
    mounted() {

    },
    computed: {
        item() {
            return this.attrs;
        },
    },
};
</script>
